import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getClassifyList } from '../../api/classify'

export class Classify extends Component {
    state = {
        count: 0
    }
    changeCount = (count) => {
        this.setState({
            count
        })
    }
    render() {
        console.log(this.props.classifyList)
        const { count } = this.state
        const { classifyList } = this.props
        return (
            <div className = "classify">
                <div className="left">
                    {
                        classifyList.map((item, index) => {
                            return <p className = { count === index? "classify-active" : "" } onClick = {() => {
                                this.changeCount(index)
                            }} key = { item.cat_id }>
                                { item.cat_name }
                            </p>
                        })
                    }
                </div>
                <div className="right">
                    {
                        classifyList.length > 0?classifyList[count].children.map(item => {
                            return <div key = { item.cat_id }>
                                <p className = "sub-title">/ { item.cat_name } /</p>
                                <div className="context">
                                    {
                                        item.children? item.children.map(items => {
                                            return <dl key = { items.cat_id }>
                                                <dt>
                                                    <img src = { items.cat_icon } alt="" />
                                                </dt>
                                                <dd>
                                                    { items.cat_name }
                                                </dd>
                                            </dl>
                                        }): ""
                                    }
                                </div>
                            </div>
                        }): ""
                    }
                </div>
            </div>
        )
    }
    componentDidMount() {
        this.props.getClassify()
    }
}

const mapStateToProps = (state) => {
    const { classifyList } = state
    return {
        classifyList
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getClassify() {
            dispatch((next) => {
                getClassifyList().then(res => {
                    next({ type: "SET_CLASSIFY", list: res.data.message })
                })
            })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Classify)
